<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>0000</title>
        <style>
            .box {
                width:100px;
                height:100px;
                background:red;
                transition:1s width; <!--第二个秒数是延迟时间-->
            }

        </style>
        <script>
            window.onload = function () {
                var oBox = document.getElementById("box");
                oBox.onclick = function () {
                    this.style.width = this.offsetWidth + 100 + "px";
                }
                
                addEnd(oBox,end);
                
                function end() {
                    remove(this,end);
                    this.style.width = this.offsetWidth + 100 + "px";
                }
                
                function addEnd(obj,fn) {
                    obj.addEventListener("WebkitTransitionEnd",fn,false);
                    obj.addEventListener("transitionend",fn,false);
                }
                function remove(obj,fn) {
                    obj.removeEventListener("WebkitTransitionEnd",fn,false);
                    obj.removeEventListener("transitionend",fn,false);
                }
            }
        </script>
    </head>
    <body>
        <div class="box" id="box"></div>
    </body>
</html>